<template>
  <div>
    <div class="header">
      {{obj.isActive}}
      <span :class="{'active':obj.isActive==0}" @click="onClickActive(0)">第一步</span>
      <span :class="{'active': obj.isActive==1}" @click="onClickActive(1)">第二步</span>
      <span :class="{'active': obj.isActive==2}" @click="onClickActive(2)">第三步</span>
    </div>
    <div class="content">
      <div v-if="obj.isActive==0">
        <div class="box-flex">
          <div class="child label">
              课程名称:
          </div>
          <div class="child">
            <el-input
              placeholder="请输入内容"
              prefix-icon="el-icon-search"
              v-model="name">
            </el-input>
          </div>
        </div>
        <div class="box-flex">
          <div class="child label">
              随便写点: 
          </div>
          <div class="child">
            <el-input
              placeholder="请输入内容"
              prefix-icon="el-icon-search"
              v-model="content">
            </el-input>
          </div>
        </div>
        <div class="box-flex">
          <div class="child label">
               
          </div>
          <div class="child">
            <el-button type="primary" @click="onCliickHandle()">确认提交</el-button>
          </div>
        </div>
      
      </div>
      <div v-if="obj.isActive==1">内容2</div>
      <div v-if="obj.isActive==2">内容3</div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        obj:{
          isActive:0
        },
        name:'',
        content:''
      }
    },
    created(){
      //
      console.log(this.$route.query.id)
      if(this.$route.query.id==='undefined'){
        this.isActive=0
        this.$router.push(    
        {
          path: this.$route.path,
          query: {id: 0}
        }
      )
      }else{
        this.isActive=this.$route.query.id
      }
    },
    watch:{
      '$route.path':function(val){
        console.log(val)
        // this.isActive=this.$route.query
      }
    },
    methods: {
     onClickActive(index){
      //  console.log(this.$route.query.id)
       this.obj.isActive=index
      //  this.$router.push(    
      //   {
      //     path: this.$route.path,
      //     query: {id: index}
      //   }
      // )
     },
    onCliickHandle(){
        if(this.name===''||this.content===''){
          alert('请输入内容')
        }else{
          //表单里的数据
          let obj={
              "姓名":1,
              "密码":2,
              "姓名1":1,
              "密码1":2,
              "姓名2":'dfsdkfjdsjfksldjfklsdjfksdjfklsdjflksdjfklsdjfsdjfsddddddddddddddddsdfsdkfjdslkjfsdkljflsdjfdsljfklsdjfklsdjfkdsjf',
              "密码2":2,
              "姓名3":1,
              "密码3":2,
              "姓名4":1,
              "密码4":2,
              "姓名5":1,
              "密码5":2,
              "姓名6":1,
              "密码6":2,
              "姓名7":1,
              "密码7":2,
              "姓名8":'dfsdkfjdsjfksldjfklsdjfksdjfklsdjflksdjfklsdjfsdjfsddddddddddddddddsdfsdkfjdslkjfsdkljflsdjfdsljfklsdjfklsdjfkdsjf',
              "密码8":2,
              "姓名9":1,
              "密码9":2,
              "姓名10":'dfsdkfjdsjfksldjfklsdjfksdjfklsdjflksdjfklsdjfsdjfsddddddddddddddddsdfsdkfjdslkjfsdkljflsdjfdsljfklsdjfklsdjfkdsjf',
              "密码10":2,
              'aaaa':'这里是用来尝试url能传多大的参数这里是用来尝试url能传多大的参数这里是用来尝试url能传多大的参数这里是用来尝试url能传多大的参数这里是用来尝试url能传多大的参数',
              'bbbbbb':'这里是用来尝试url能传多大的参数这里是用来尝试url能传多大的参数这里是用来尝试url能传多大的参数这里是用来尝试url能传多大的参数这里是用来尝试url能传多大的参数',
              'aaaad':'这里是用来尝试url能传多大的参数这里是用来尝试url能传多大的参数这里是用来尝试url能传多大的参数这里是用来尝试url能传多大的参数这里是用来尝试url能传多大的参数',
              'aaata':'这里是用来尝试url能传多大的参数这里是用来尝试url能传多大的参数这里是用来尝试url能传多大的参数这里是用来尝试url能传多大的参数这里是用来尝试url能传多大的参数',
              'aaaaara':'这里是用来尝试url能传多大的参数这里是用来尝试url能传多大的参数这里是用来尝试url能传多大的参数这里是用来尝试url能传多大的参数这里是用来尝试url能传多大的参数',
              'bbbsdbbb':'这里是用来尝试url能传多大的参数这里是用来尝试url能传多大的参数这里是用来尝试url能传多大的参数这里是用来尝试url能传多大的参数这里是用来尝试url能传多大的参数',
              'aaacad':'这里是用来尝试url能传多大的参数这里是用来尝试url能传多大的参数这里是用来尝试url能传多大的参数这里是用来尝试url能传多大的参数这里是用来尝试url能传多大的参数',
              'aaawta':'这里是用来尝试url能传多大的参数这里是用来尝试url能传多大的参数这里是用来尝试url能传多大的参数这里是用来尝试url能传多大的参数这里是用来尝试url能传多大的参数',
              'aartertraa':'这里是用来尝试url能传多大的参数这里是用来尝试url能传多大的参数这里是用来尝试url能传多大的参数这里是用来尝试url能传多大的参数这里是用来尝试url能传多大的参数',
              'bbbberterdfbb':'这里是用来尝试url能传多大的参数这里是用来尝试url能传多大的参数这里是用来尝试url能传多大的参数这里是用来尝试url能传多大的参数这里是用来尝试url能传多大的参数',
              'aaadrtrtfdad':'这里是用来尝试url能传多大的参数这里是用来尝试url能传多大的参数这里是用来尝试url能传多大的参数这里是用来尝试url能传多大的参数这里是用来尝试url能传多大的参数',
              'dftrtrd':'这里是用来尝试url能传多大的参数这里是用来尝试url能传多大的参数这里是用来尝试url能传多大的参数这里是用来尝试url能传多大的参数这里是用来尝试url能传多大的参数',
              'aaadfdfsdfdaara':'这里是用来尝试url能传多大的参数这里是用来尝试url能传多大的参数这里是用来尝试url能传多大的参数这里是用来尝试url能传多大的参数这里是用来尝试url能传多大的参数',
              'bbbdfdfdsdbbb':'这里是用来尝试url能传多大的参数这里是用来尝试url能传多大的参数这里是用来尝试url能传多大的参数这里是用来尝试url能传多大的参数这里是用来尝试url能传多大的参数',
              'aaadfdfcad':'这里是用来尝试url能传多大的参数这里是用来尝试url能传多大的参数这里是用来尝试url能传多大的参数这里是用来尝试url能传多大的参数这里是用来尝试url能传多大的参数',
              'aaddfdfdfdawta':'这里',
              'bdfdbbb':'这里是用来尝试url能传多大的参数这里是用来尝试url能传多大的参数这里是用来尝试url能传多大的参数这里是用来尝试url能传多大的参数这里是用来尝试url能传多大的参数',
              'id':'结束了'
            }
          this.$router.push({
            path:this.$route.path,
            query:{
              id:obj
            }
          })
          this.isActive=1;
          console.log(typeof this.$route.query.id)
          
        }
      }
    }
  };
</script>
<style scoped>
  .header span{
    display: inline-block;
    padding:10px;
    border:#000 solid 1px;
    border-radius: 50%;
    text-align: center;
    margin-right:40px;
  }
  .active{
    color:red
  }
  .content{
    padding:20px;
  }
  .box-flex{display: flex;align-items: center;margin-bottom:20px;}
  .label{margin-right:10px;min-width:80px;}
  /* .box-flex .child{flex: 1} */
</style>